import {
  Popover,
  List,
  Avatar,
  Row,
  Col,
  Tabs,
  Typography,
  Divider,
} from 'antd';
import React, { useState } from 'react';
import { Link } from 'umi';
import SetTheme from '@/layouts/components/SetTheme';
import LayoutContext from '../layouts/stores/LayoutContext';
import {
  CommentOutlined,
  UserOutlined,
  SettingOutlined,
  BellOutlined,
} from '@ant-design/icons';

const { TabPane } = Tabs;

const HeaderUser = () => {
  // 引入公共数据
  const counter = LayoutContext.useContainer();

  const [visible, setVisible] = useState(false);

  const handleMenuClick = () => {
    setVisible(false);
  };

  const handleVisibleChange = (flag: boolean) => {
    setVisible(flag);
  };

  //模拟消息列表
  const data = [
    'Racing car sprays burning fuel into crowd.',
    'Japanese princess to wed commoner.',
    'Australian walks 100km after outback crash.',
    'Man charged over missing wedding girl.',
    'Los Angeles battles huge wildfires.',
  ];

  /**
   * 切换消息列表触发
   * @param key
   */
  const callback = (key: string) => {
    console.log(key);
  };

  // 头像下拉框
  const userContent = (
    <div style={{ width: 150 }}>
      <List itemLayout="horizontal">
        <List.Item onClick={handleMenuClick}>
          <List.Item.Meta
            avatar={<UserOutlined />}
            title={<Link to="/user">个人中心</Link>}
          />
        </List.Item>
        <List.Item onClick={handleMenuClick}>
          <List.Item.Meta
            avatar={<SettingOutlined />}
            title={
              <a>
                <SetTheme />
              </a>
            }
          />
        </List.Item>
      </List>
    </div>
  );

  const massageContent = (
    <div style={{ width: 300 }}>
      <Tabs defaultActiveKey="1" onChange={callback}>
        <TabPane tab="Tab 1" key="1">
          <List
            dataSource={data}
            renderItem={(item) => (
              <List.Item>
                <Typography.Text mark>[ITEM]</Typography.Text> {item}
              </List.Item>
            )}
          />
        </TabPane>
        <TabPane tab="Tab 2" key="2">
          <List
            size="small"
            dataSource={data}
            renderItem={(item) => <List.Item>{item}</List.Item>}
          />
        </TabPane>
        <TabPane tab="Tab 3" key="3">
          <List
            size="large"
            dataSource={data}
            renderItem={(item) => <List.Item>{item}</List.Item>}
          />
        </TabPane>
      </Tabs>
    </div>
  );
  return (
    <Row
      align="middle"
      style={
        counter.menuTheme === 'light'
          ? { textAlign: 'center' }
          : { color: '#fff', textAlign: 'center' }
      }
    >
      <Col span={5}></Col>
      <Col span={5} style={{ cursor: 'pointer' }}>
        <Popover placement="bottom" content={massageContent}>
          <div style={{ width: '100%', height: 64 }}>
            <BellOutlined
              style={{ position: 'absolute', top: 23, fontSize: 25 }}
            />
          </div>
        </Popover>
      </Col>
      <Col span={10}>
        <Popover
          placement="bottom"
          trigger="click"
          content={userContent}
          visible={visible}
          onVisibleChange={handleVisibleChange}
        >
          <Row style={{ cursor: 'pointer' }}>
            <Col span={8}>
              <Avatar src="https://joeschmoe.io/api/v1/random" />
            </Col>
            <Col span={16}>Hi,{counter.userName}</Col>
          </Row>
        </Popover>
      </Col>
      <Col span={4}></Col>
    </Row>
  );
};

export default HeaderUser;
